<script>
	import Basics from './components/Basics/index.svelte'
	import AddingData from './components/AddingData/index.svelte'
	import DynamicAttributes from './components/DynamicAttributes/index.svelte'
	import Styling from './components/Styling/index.svelte'
	import NestedComponents from './components/NestedComponents/index.svelte'
	import HtmlTags from './components/HtmlTags/index.svelte'
	import ReactiveAssignments from './components/ReactiveAssignments/index.svelte'
	import ReactiveDeclarations from './components/ReactiveDeclarations/index.svelte'
	import ReactiveStatements from './components/ReactiveStatements/index.svelte'
	import UpdatingArraysAndObjects from './components/UpdatingArraysAndObjects/index.svelte'
	import Export01, {username, logHello} from './components/DeclaringProps/Export01.svelte'
	import Props01 from './components/DeclaringProps/Props01.svelte'
	export let name;
	const my = {
		a: 'A',
		b: 'B',
		c: 'C'
	}
</script>

<main>
	<Basics />
	<AddingData />
	<DynamicAttributes />
	<Styling />
	<NestedComponents />
	<HtmlTags />
	<ReactiveAssignments />
	<ReactiveDeclarations />
	<ReactiveStatements />
	<UpdatingArraysAndObjects />
	<Export01 />
	<div>
		<p>{username}</p>
		<button on:click={logHello}>导出的方法</button>
	</div>
	<Props01 num={12} obj={{name: '姓名', age: 29}} />
	<Props01 {my} />
	<h1>Hello {name}!</h1>
	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>

<style>
	main {
		text-align: center;
		padding: 1em;
		max-width: 240px;
		margin: 0 auto;
	}

	h1 {
		color: #ff3e00;
		text-transform: uppercase;
		font-size: 4em;
		font-weight: 100;
	}

	@media (min-width: 640px) {
		main {
			max-width: none;
		}
	}
</style>
